<template>
    <BackgroundImage>
        <TopNavigation title="赛程列表" backText="赛事业务" :titleSub='"赛事:" + matchName' />
        <view class="view-container">
            <view class="view-container-left">
                <view class="view-container-left-top" @click="goToCreateSchedule">
                    创建赛程
                </view>
                <view class="view-container-left-model" @click="goToScheduleModel">
                    赛程模型
                </view>
                <view class="view-container-left-bottom"  @click="goToScheduleSettle">
                    赛程结算方式
                </view>
            </view>
            <view class="view-container-right">
                <BoxView :titBoxObj="{
                    title: '赛程列表',
                    titleCount: `共有${scheduleList.length}个赛程`
                }" padding="0" style="background: #FFFFF4;">
                    <view class="view-container-right-list">
                        <view class="view-container-right-list-item-empty" v-if="scheduleList.length === 0">
                            <text>暂无赛程</text>
                        </view>
                        <view class="view-container-right-list-item-empty" v-if="loading">
                            <text>加载中...</text>
                        </view>
                        <view v-if="!loading && scheduleList.length > 0" class="view-container-right-list-item"
                            v-for="schedule in scheduleList" :key="schedule.id">
                            <view class="view-container-right-list-item-title">
                                <!-- 正常显示模式 -->
                                <template v-if="currentViewMode[schedule.id] !== 'bindSettle'">
                                    <view class="next-row">
                                        <view class="id-text" style="font-size: 16rpx;">{{ schedule.name }}</view>
                                        <view class="schedule-status" :class="getStatusClass(schedule.status)">
                                            {{ getStatusText(schedule.status) }}
                                        </view>
                                    </view>
                                    <view class="next-row">
                                        <view class="id-text"><text>赛程ID:</text>{{ schedule.id }}</view>
                                    </view>
                                    <view class="next-row">
                                        <view class="id-value"><text>开始时间:</text>{{ formatDate(schedule.startTime) }}</view>
                                    </view>
                                    <view class="next-row">
                                        <view class="id-text"><text>结束时间:</text>{{ formatDate(schedule.endTime) }}</view>
                                    </view>
                                    <view class="next-row">
                                        <view class="id-text"><text>描述:</text>{{ schedule.desc || '无' }}</view>
                                    </view>
                                    <view class="next-button">
                                        <view class="next-button-item1" @click.stop="registerSchedule(schedule)">报名</view>
                                        <view class="next-button-item2" @click.stop="viewRegistrations(schedule)">查看报名情况</view>
                                        <view class="next-button-item3" @click.stop="toggleBindSettle(schedule)">绑定结算方式</view>
                                        <view class="next-button-item4" @click="goToRoomQuery(schedule)">房间列表</view>
                                    </view>
                                </template>
                                
                                <!-- 绑定结算方式显示模式 -->
                                <template v-else>
                                    <view class="bind-settle-section">
                                        <view class="bind-settle-header">
                                            <text class="section-title">已绑定的结算方式</text>
                                            <view class="close-x-btn" @click.stop="closeBindSettle(schedule)">×</view>
                                        </view>
                                        <view class="section-header">
                                            <view class="add-btn" @click.stop="openAddSettleModal(schedule)">添加结算方式</view>
                                        </view>
                                        
                                        <view v-if="scheduleBindLoading[schedule.id]" class="loading-container">
                                            <text>加载中...</text>
                                        </view>
                                        
                                        <view v-else-if="!scheduleBindList[schedule.id] || scheduleBindList[schedule.id].length === 0" class="empty-state">
                                            <text>暂未绑定结算方式</text>
                                        </view>
                                        
                                        <view v-else class="bind-list">
                                            <view 
                                                class="bind-item" 
                                                v-for="bind in scheduleBindList[schedule.id]" 
                                                :key="bind.id"
                                            >
                                                <view class="bind-content">
                                                    <text class="settle-id">结算方式ID: {{ bind.matchScheduleSettleId }}</text>
                                                    <text class="settle-type">结算类型: {{ getSettleTypeText(bind.settleType) }}</text>
                                                </view>
                                                <view class="unbind-btn" @click.stop="openUnbindModal(schedule, bind)">解绑</view>
                                            </view>
                                        </view>
                                    </view>
                                </template>
                            </view>
                        </view>
                    </view>

                </BoxView>
            </view>
        </view>
        
        <!-- 添加结算方式弹窗 -->
        <PopuleView
            v-model="showAddSettleModal"
            title="添加结算方式"
            :list-data="settleListForPicker"
            :show-submit="true"
            submit-text="绑定"
            item-label="label"
            item-key="id"
            :selected-value="selectedSettleId"
            @submit="bindSettle"
            @item-click="handleSettleItemClick"
        />
        
        <!-- 解绑确认弹窗 -->
        <PopuleView
            v-model="showUnbindModal"
            title="确认解绑"
            :description="unbindConfirmText"
            :show-submit="true"
            submit-text="确认解绑"
            @submit="confirmUnbind"
        />
        
        <!-- 报名确认弹窗 -->
        <PopuleView
            v-model="showRegisterConfirm"
            title="确认报名"
            :description="registerConfirmText"
            :show-submit="true"
            submit-text="确认报名"
            @submit="confirmRegister"
        />
    </BackgroundImage>

</template>


<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { MatchAPI, MatchScheduleSettleAPI, MatchScheduleSettleRefAPI, MatchScheduleRegAPI, BattleAPI } from '@/api/battle.js'
import { useUserStore } from '@/stores/user.js'
import BoxView from "@/components/UiView/BoxView.vue";
import TopNavigation from "@/components/UiView/TopNavigation.vue";
import BackgroundImage from "@/components/BackgroundImage.vue";
import PopuleView from "@/components/UiView/PopuleView.vue";


const loading = ref(false)
const scheduleList = ref([])
const matchId = ref('')
const matchName = ref('')

// 用户store
const userStore = useUserStore()

// 结算方式绑定相关数据
const showAddSettleModal = ref(false)
const showUnbindModal = ref(false)
const settleLoading = ref(false)
const binding = ref(false)
const currentSchedule = ref(null)
const currentUnbindItem = ref(null)
const currentUnbindSchedule = ref(null)
const settleList = ref([])
const selectedSettleId = ref('')
// 每个赛程的视图模式：'normal' | 'bindSettle'
const currentViewMode = ref({})
// 每个赛程的绑定列表
const scheduleBindList = ref({})
// 每个赛程的加载状态
const scheduleBindLoading = ref({})

// 报名确认相关数据
const showRegisterConfirm = ref(false)
const currentRegisterSchedule = ref(null)
const registerConfirmText = computed(() => {
    if (!currentRegisterSchedule.value) return ''
    const scheduleName = currentRegisterSchedule.value.name || '该赛程'
    return `确定要报名参加赛程 "${scheduleName}" 吗？`
})

// 状态映射
const statusMap = {
    0: '待开始',
    1: '进行中',
    2: '已结束'
}

// 状态样式映射
const statusClassMap = {
    0: 'status-pending',
    1: 'status-active',
    2: 'status-finished'
}

// 结算类型映射
const settleTypeMap = {
    1: '排行榜服务',
    2: '积分服务',
    3: '预留',
    4: '预留'
}

const getStatusText = (status) => statusMap[status] || '未知'
const getStatusClass = (status) => statusClassMap[status] || 'status-unknown'
const getSettleTypeText = (type) => settleTypeMap[type] || '未知'

const formatDate = (timestamp) => {
    if (!timestamp) return '未设置'
    const date = new Date(timestamp)
    return date.toLocaleString('zh-CN')
}

const fetchSchedules = async () => {
    if (!matchId.value) return;
    loading.value = true
    setCurrentIndex(0)
    try {
        const result = await MatchAPI.schedulePage({ matchId: matchId.value })
        console.log('赛程查询API返回结果:', result)
        if (result.code === 0) {
            scheduleList.value = result.data || []
        } else {
            scheduleList.value = [] // Ensure list is cleared on error
            throw new Error(result.msg || '获取赛程失败')
        }
    } catch (error) {
        console.error('获取赛程失败:', error)
        uni.showToast({
            title: error.message || '获取赛程失败',
            icon: 'none'
        })
    } finally {
        loading.value = false
    }
}

onLoad((options) => {
    if (options.matchId) {
        matchId.value = options.matchId
        matchName.value = decodeURIComponent(options.matchName || '')
        fetchSchedules()
    }
})

// 跳转到创建赛程页面
const goToCreateSchedule = () => {
    uni.navigateTo({
        url: `/views/schedule-create?matchId=${matchId.value}&matchName=${encodeURIComponent(matchName.value)}`
    })
}

// 跳转到赛程模型页面
const goToScheduleModel = () => {
    uni.navigateTo({
        url: `/views/schedule-model-manage/index?matchId=${matchId.value}&matchName=${encodeURIComponent(matchName.value)}`
    })
}

// 跳转到赛程结算方式页面
const goToScheduleSettle = () => {
    uni.navigateTo({
        url: `/views/schedule-model-manage/schedule-settle-manage?matchId=${matchId.value}&matchName=${encodeURIComponent(matchName.value)}`
    })
}

// 切换绑定结算方式显示
const toggleBindSettle = (schedule) => {
    const scheduleId = schedule.id
    if (currentViewMode.value[scheduleId] === 'bindSettle') {
        closeBindSettle(schedule)
    } else {
        currentViewMode.value[scheduleId] = 'bindSettle'
        loadBindList(schedule)
    }
}

// 关闭绑定结算方式显示
const closeBindSettle = (schedule) => {
    const scheduleId = schedule.id
    currentViewMode.value[scheduleId] = 'normal'
}

// 加载绑定列表
const loadBindList = async (schedule) => {
    if (!schedule) return

    const scheduleId = schedule.id
    scheduleBindLoading.value[scheduleId] = true
    try {
        const result = await MatchScheduleSettleRefAPI.page({
            matchScheduleId: scheduleId,
            pageNum: 0,
            pageSize: 100
        })

        if (result.code === 0 && result.data) {
            scheduleBindList.value[scheduleId] = result.data.list || result.data || []
        } else {
            scheduleBindList.value[scheduleId] = []
            throw new Error(result.msg || '获取绑定列表失败')
        }
    } catch (error) {
        console.error('获取绑定列表失败:', error)
        uni.showToast({
            title: error.message || '获取绑定列表失败',
            icon: 'none'
        })
    } finally {
        scheduleBindLoading.value[scheduleId] = false
    }
}

// 显示添加结算方式模态框
const openAddSettleModal = (schedule) => {
    currentSchedule.value = schedule
    showAddSettleModal.value = true
    selectedSettleId.value = ''
    loadSettleList(schedule)
}

// 关闭添加结算方式模态框
const closeAddSettleModal = () => {
    showAddSettleModal.value = false
    selectedSettleId.value = ''
}

// 加载结算方式列表
const loadSettleList = async (schedule) => {
    settleLoading.value = true
    try {
        const result = await MatchScheduleSettleAPI.page({
            pageNum: 0,
            pageSize: 100
        })

        if (result.code === 0 && result.data) {
            settleList.value = result.data.list || result.data || []
        } else {
            settleList.value = []
            throw new Error(result.msg || '获取结算方式列表失败')
        }
    } catch (error) {
        console.error('获取结算方式列表失败:', error)
        uni.showToast({
            title: error.message || '获取结算方式列表失败',
            icon: 'none'
        })
    } finally {
        settleLoading.value = false
    }
}

// 选择结算方式
const selectSettle = (settle) => {
    if (!isSettleBound(settle.id)) {
        selectedSettleId.value = settle.id
    }
}

// 处理结算方式列表项点击
const handleSettleItemClick = (item, index) => {
    // 如果已绑定，不允许选择
    if (item.isBound) {
        uni.showToast({
            title: '该结算方式已绑定',
            icon: 'none'
        })
        return
    }
    selectedSettleId.value = item.id
}

// 结算列表用于选择器
const settleListForPicker = computed(() => {
    if (!currentSchedule.value) return []
    const scheduleId = currentSchedule.value.id
    const bindList = scheduleBindList.value[scheduleId] || []
    
    return settleList.value.map(settle => {
        const isBound = bindList.some(bind => bind.matchScheduleSettleId === settle.id)
        const boundText = isBound ? ' [已绑定]' : ''
        return {
            id: settle.id,
            label: `${settle.settleName || '未命名'} (ID: ${settle.id}, 类型: ${settle.settleType})${boundText}`,
            settle: settle,
            isBound: isBound
        }
    })
})

// 检查结算方式是否已绑定
const isSettleBound = (settleId) => {
    if (!currentSchedule.value) return false
    const scheduleId = currentSchedule.value.id
    const bindList = scheduleBindList.value[scheduleId] || []
    return bindList.some(bind => bind.matchScheduleSettleId === settleId)
}

// 绑定结算方式
const bindSettle = async () => {
    if (!selectedSettleId.value || !currentSchedule.value) {
        uni.showToast({
            title: '请选择结算方式',
            icon: 'none'
        })
        return
    }

    const selectedSettle = settleList.value.find(s => s.id === selectedSettleId.value)
    if (!selectedSettle) {
        uni.showToast({
            title: '结算方式不存在',
            icon: 'none'
        })
        return
    }
    
    if (isSettleBound(selectedSettleId.value)) {
        uni.showToast({
            title: '该结算方式已绑定',
            icon: 'none'
        })
        return
    }

    binding.value = true
    try {
        const result = await MatchScheduleSettleRefAPI.create({
            matchScheduleId: currentSchedule.value.id,
            matchScheduleSettleId: selectedSettleId.value,
            settleType: selectedSettle.settleType || 1
        })

        if (result.code === 0) {
            uni.showToast({
                title: '绑定成功',
                icon: 'success'
            })
            showAddSettleModal.value = false
            selectedSettleId.value = ''
            if (currentSchedule.value) {
                loadBindList(currentSchedule.value)
            }
        } else {
            throw new Error(result.msg || '绑定失败')
        }
    } catch (error) {
        console.error('绑定结算方式失败:', error)
        uni.showToast({
            title: error.message || '绑定失败',
            icon: 'none'
        })
    } finally {
        binding.value = false
    }
}

// 打开解绑确认弹窗
const openUnbindModal = (schedule, bind) => {
    currentUnbindSchedule.value = schedule
    currentUnbindItem.value = bind
    showUnbindModal.value = true
}

// 关闭解绑确认弹窗
const closeUnbindModal = () => {
    showUnbindModal.value = false
    currentUnbindItem.value = null
    currentUnbindSchedule.value = null
}

// 解绑确认文本
const unbindConfirmText = computed(() => {
    if (currentUnbindItem.value) {
        return `确定要解绑结算方式 ID: ${currentUnbindItem.value.matchScheduleSettleId} 吗？`
    }
    return '确定要解绑吗？'
})

// 确认解绑
const confirmUnbind = async () => {
    if (!currentUnbindItem.value || !currentUnbindSchedule.value) return
    
    const schedule = currentUnbindSchedule.value
    
    try {
        const result = await MatchScheduleSettleRefAPI.remove({
            matchScheduleSettleRefId: currentUnbindItem.value.id
        })

        if (result.code === 0) {
            uni.showToast({
                title: '解绑成功',
                icon: 'success'
            })
            showUnbindModal.value = false
            currentUnbindItem.value = null
            currentUnbindSchedule.value = null
            loadBindList(schedule)
        } else {
            throw new Error(result.msg || '解绑失败')
        }
    } catch (error) {
        console.error('解绑结算方式失败:', error)
        uni.showToast({
            title: error.message || '解绑失败',
            icon: 'none'
        })
    }
}

// 赛程报名
const registerSchedule = (schedule) => {
    // 检查用户是否已登录
    if (!userStore.isLoggedIn) {
        uni.showToast({
            title: '请先登录',
            icon: 'none'
        })
        return
    }
    
    currentRegisterSchedule.value = schedule
    showRegisterConfirm.value = true
}

// 确认报名
const confirmRegister = async () => {
    if (!currentRegisterSchedule.value) return
    
    // 显示加载提示
    uni.showLoading({
        title: '报名中...'
    })
    
    try {
        // 调用新的赛程报名API
        const result = await BattleAPI.regSchedule({
            matchScheduleId: currentRegisterSchedule.value.id,  // 要报名的赛程ID
            appId: 1,                      // 应用ID，默认1
            channel: 1                     // 渠道ID，默认1
        })
        
        console.log('赛程报名API返回结果:', result)
        
        if (result.code === 0) {
            uni.showToast({
                title: '报名成功',
                icon: 'success'
            })
            
            showRegisterConfirm.value = false
            currentRegisterSchedule.value = null
            
            // 可以在这里添加其他逻辑，比如刷新报名状态等
            console.log('报名成功，返回数据:', result.data)
        } else {
            throw new Error(result.msg || '报名失败')
        }
    } catch (error) {
        console.error('报名失败:', error)
        
        // 关闭弹窗
        showRegisterConfirm.value = false
        currentRegisterSchedule.value = null
        
        // 显示错误提示
        uni.showToast({
            title: error.message || '报名失败',
            icon: 'none',
            duration: 2000
        })
    } finally {
        uni.hideLoading()
    }
}

// 查看报名情况
const viewRegistrations = (schedule) => {
    uni.navigateTo({
        url: `/views/schedule-query/schedule-registration?scheduleId=${schedule.id}&scheduleName=${encodeURIComponent(schedule.name)}`
    })
}

// 跳转到房间查询页面
const goToRoomQuery = (schedule) => {
    uni.navigateTo({
        url: `/views/room-query/room-query?scheduleId=${schedule.id}&scheduleName=${encodeURIComponent(schedule.name)}`
    })
}


// 当前模式的索引
const currentIndex = ref(0)
const setCurrentIndex = (index) => currentIndex.value = index

</script>

<style scoped lang="scss">
.view-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: calc(100vh - 65rpx);
    padding-right: 20rpx;
    overflow: hidden;

    .schedule-status {
        display: flex;width:auto;
        padding: 4rpx 20rpx;
        border-radius: 20rpx;
        font-size: 12rpx;
        font-weight: bold;

        &.status-pending {
            background: #fff3cd;
            color: #856404;
        }

        &.status-active {
            background: #d4edda;
            color: #155724;
        }

        &.status-finished {
            background: #f8d7da;
            color: #721c24;
        }
    }

    &-right {
        flex: 1;
        height: 100%;
        overflow: hidden;

        &-list {
            padding: 10rpx;
            overflow: auto;
            height: calc(100% - 60rpx);

            &-item {
                background: #F0F0E4;
                border-radius: 10rpx;
                padding: 10rpx;
                margin-bottom: 10rpx;
                font-size: 14rpx;

                &-empty {
                    text-align: center;
                    margin-top: 80rpx;
                }
                
                // 绑定结算方式内联样式
                .bind-settle-section {
                    .bind-settle-header {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        margin-bottom: 15rpx;
                        
                        .section-title {
                            font-size: 14rpx;
                            font-weight: bold;
                            color: #333;
                        }
                        
                        .close-x-btn {
                            width: 30rpx;
                            height: 30rpx;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 24rpx;
                            color: #999;
                            cursor: pointer;
                            
                            &:hover {
                                color: #333;
                            }
                        }
                    }
                    
                    .section-header {
                        display: flex;
                        justify-content: flex-end;
                        align-items: center;
                        margin-bottom: 15rpx;
                        
                        .add-btn {
                            padding: 6rpx 12rpx;
                            background: #3D85EC;
                            color: #fff;
                            border-radius: 6rpx;
                            font-size: 12rpx;
                            cursor: pointer;
                        }
                    }
                    
                    .loading-container,
                    .empty-state {
                        text-align: center;
                        padding: 20rpx;
                        color: #999;
                        font-size: 12rpx;
                    }
                    
                    .bind-list {
                        .bind-item {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            padding: 10rpx;
                            margin-bottom: 8rpx;
                            background: #fff;
                            border-radius: 6rpx;
                            
                            .bind-content {
                                flex: 1;
                                display: flex;
                                flex-direction: column;
                                gap: 4rpx;
                                
                                .settle-id,
                                .settle-type {
                                    font-size: 12rpx;
                                    color: #333;
                                }
                            }
                            
                            .unbind-btn {
                                padding: 6rpx 12rpx;
                                background: #dc3545;
                                color: #fff;
                                border-radius: 6rpx;
                                font-size: 12rpx;
                                cursor: pointer;
                            }
                        }
                    }
                }

                .next-button {
                    display: flex;
                    justify-content: end;
                    align-items: center;
                    margin-top: 10rpx;

                    &-item1,
                    &-item2,
                    &-item3,
                    &-item4 {
                        width: 108rpx;
                        height: 30rpx;
                        font-size: 14rpx;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        padding-bottom: 4rpx;
                        color: #fff;
                    }


                    &-item1 {
                        background: url('/static/buttons/button2-1.png') no-repeat center center;
                        background-size: 100% 100%;
                        margin-right: 10rpx;
                    }

                    &-item2 {
                        background: url('/static/buttons/button7.png') no-repeat center center;
                        background-size: 100% 100%;
                    }

                    &-item3 {
                        background: url('/static/buttons/button5.png') no-repeat center center;
                        background-size: 100% 100%;
                    }

                    &-item4 {
                        background: url('/static/buttons/button6.png') no-repeat center center;
                        background-size: 100% 100%;
                    }
                }

                .next-row {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 10rpx;

                    text {
                        display: inline-block;
                        font-size: 14rpx;
                        color: #99A1A4;
                        width: 70rpx;
                        text-align: right;
                    }
                }
            }
        }
    }

    &-left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 10rpx 20rpx;

        view {
            width: 110rpx;
            box-sizing: border-box;
            padding-bottom: 10rpx;
            height: 85rpx;
            font-size: 15rpx;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: end;
            margin-bottom: 10rpx;
        }

        &-top {
            background: url('/static/view3.png') no-repeat center center;
            background-size: 100% 100%;
        }

        &-bottom {
            background: url('/static/view5.png') no-repeat center center;
            background-size: 100% 100%;
        }

        &-model {
            background: url('/static/view4.png') no-repeat center center;
            background-size: 100% 100%;
        }
    }
}

// 绑定弹窗样式
.bind-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bind-modal-content {
    width: 90%;
    max-width: 800rpx;
    max-height: 80vh;
    background: #fff;
    border-radius: 12rpx;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.bind-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20rpx;
}

.bind-section {
    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;
        
        .section-title {
            font-size: 16rpx;
            font-weight: bold;
            color: #333;
        }
        
        .add-btn {
            padding: 8rpx 16rpx;
            background: #3D85EC;
            color: #fff;
            border-radius: 6rpx;
            font-size: 14rpx;
            cursor: pointer;
        }
    }
    
    .loading-container,
    .empty-state {
        text-align: center;
        padding: 40rpx;
        color: #999;
        font-size: 14rpx;
    }
    
    .bind-list {
        .bind-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15rpx;
            margin-bottom: 10rpx;
            background: #F0F0E4;
            border-radius: 8rpx;
            
            .bind-content {
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 5rpx;
                
                .settle-id,
                .settle-type {
                    font-size: 14rpx;
                    color: #333;
                }
            }
            
            .unbind-btn {
                padding: 8rpx 16rpx;
                background: #dc3545;
                color: #fff;
                border-radius: 6rpx;
                font-size: 14rpx;
                cursor: pointer;
            }
        }
    }
}

.settle-list {
    .settle-item {
        padding: 15rpx;
        margin-bottom: 10rpx;
        background: #F0F0E4;
        border-radius: 8rpx;
        cursor: pointer;
        position: relative;
        
        &.selected {
            background: #FFF9E6;
            border: 2rpx solid #3D85EC;
        }
        
        &.bound {
            opacity: 0.6;
        }
        
        .settle-content {
            display: flex;
            flex-direction: column;
            gap: 5rpx;
            
            .settle-name {
                font-size: 16rpx;
                font-weight: bold;
                color: #333;
            }
            
            .settle-type-text {
                font-size: 14rpx;
                color: #666;
            }
            
            .settle-desc {
                font-size: 12rpx;
                color: #999;
            }
        }
        
        .settle-status {
            position: absolute;
            top: 10rpx;
            right: 10rpx;
            
            .bound-tag {
                padding: 4rpx 8rpx;
                background: #28a745;
                color: #fff;
                border-radius: 4rpx;
                font-size: 12rpx;
            }
        }
    }
}

.bind-modal-footer {
    display: flex;
    gap: 20rpx;
    padding: 20rpx;
    border-top: 1rpx solid #eee;
    
    .cancel-btn,
    .submit-btn {
        flex: 1;
        padding: 12rpx;
        text-align: center;
        border-radius: 8rpx;
        font-size: 14rpx;
        cursor: pointer;
    }
    
    .cancel-btn {
        background: #f8f9fa;
        color: #666;
        border: 1rpx solid #eee;
    }
    
    .submit-btn {
        background: #3D85EC;
        color: #fff;
        
        &.disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
    }
}

.unbind-confirm-content {
    padding: 40rpx 20rpx;
    text-align: center;
    
    .unbind-text {
        font-size: 16rpx;
        color: #333;
        line-height: 1.6;
    }
}
</style>